<template>
  <div class="container" :class="{'darkmode' : isDarkmode}">
    <div class="top">
      <div class="top-left">
        <div class="top-left-logo" @click="clickLogo()">
          <img src="../assets/images/logo.png" alt="Logo">
        </div>
        <!-- 搜索开始 -->
        <div class="top-left-search">
          <div class="top-left-search-input">
            <!-- 可以通过value-key属性控制匹配的字段 -->
            <el-autocomplete
              popper-class="my-autocomplete"
              v-model="searchQuery"
              :fetch-suggestions="querySearch"
              placeholder="请输入你需要搜索的内容"
              clearable
              @select="handleSelect"
            >
              <template #default="{ item }">
                <span v-html="item.value"></span>
              </template>
            </el-autocomplete>
          </div>
          <!-- 点击事件放在div点击哪里都可以跳转 -->
          <div class="top-left-search-icon" @click="clickSearchEvent">
            <el-icon style="height: 100%; width: 100%"><Search /></el-icon>
          </div>
        </div>
        <!-- 搜索结束 -->
      </div>
      <div class="top-right">
        <div class="top-right-person" @click="clickPersonalCenterEvent">
          <img :src="avatar" alt="头像">
          <span class="nickname">{{ nickname }}</span>
        </div>
      </div>
      <!-- 登录弹窗 -->
      <LoginDialog v-model="loginDialogVisible" @close-dialog="closeDialog"></LoginDialog>
    </div>
    <div class="centre">
      <div class="centre-left">
        <div class="centre-left-top">
          <!-- 数据0用于ai辅助搜索 -->
          <div v-if="AIAssisted" class="centre-left-top-card-0">
            <el-card style="max-width: 100%; height: 100%; max-height: 500px; overflow-y: auto;">
              <v-md-editor
                :model-value="aiReply"
                mode="preview"
              ></v-md-editor>
            </el-card>
          </div>
          <div class="centre-left-top-card" v-for="item in searchRecord" :key=item.id @click="clickCard(item)">
            <div class="centre-left-top-card-title">
              <span class="title" v-html="item.title"></span>
            </div>

            <div class="centre-left-top-card-content">
              <div class="centre-left-top-card-content-cover">
                <img :src="item.cover" alt="封面">
              </div>

              <div class="centre-left-top-card-content-overview">
                {{ item.introduce }}
              </div>
            </div>

            <div class="centre-left-top-card-source">
              来源：{{ item.source }}
            </div>
          </div>
        </div>
        <div class="centre-right-bottom">
          <el-pagination
            v-model:current-page="queryForm.pageCurrent"
            v-model:page-size="queryForm.pageSize"
            layout="prev, pager, next"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
      <div class="centre-right">
        <div class="centre-right-top">
          相关推荐
        </div>

        <div class="centre-right-bottom">
          <ol>
            <li>咖啡</li>
            <li>牛奶</li>
            <li>茶</li>
          </ol>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from 'vue'
import {useRouter, useRoute} from 'vue-router'
import LoginDialog from './components/LoginDialog.vue';
import {searchEngineApi} from '@/api/searchEngine.js'
import {historyApi} from '@/api/history.js'
import { ElMessage } from 'element-plus';
import {settingApi} from '@/api/setting.js'
import { service } from '@/utils/request.js'
import { thirdPartyApi } from '@/api/thirdParty.js'

//### 数据定义 ###
let eventSource = null;
const aiReply = ref('');  //ai回答内容
const AIAssisted = ref(false);  //记录是否开启了ai辅助功能
const avatar = ref('http://8.130.118.52:9000/images/headPortrait/defaultHead.png');  //头像
const nickname = ref('游客');  //昵称
const total = ref(0);
const queryForm = reactive({ //分页查询参数
  key: "",
  pageCurrent: 1,
  pageSize: 6,
});
const searchQuery = ref('');  //对应搜索框中的数据
const router = useRouter(); //路由器
const route = useRoute(); //路由
const loginDialogVisible = ref(false);  //控制登录对话是否显示
const isDarkmode = ref(false);  //是否开启夜间模式

const searchRecord = ref([  //搜索匹配的数据，### 标题、封面、简介、来源
  { id: 0, title: '把大象放进冰箱需要几步？', cover: '../assets/images/cover.jpg', introduce: '这是一个经典的脑筋急转弯问题，引发了无数人的思考与讨论。想象一下，一个庞大的大象如何能被巧妙地放入一个看似狭小的冰箱中？其实，答案并不复杂，只需三步：首先，打开冰箱门；接着，把大象放进去；最后，关上冰箱门。当然，这只是一个幽默的设想，现实中我们显然不能真的这样操作，但它却带给我们无限的乐趣和思考。', source: '十寻官方'},
  { id: 1, title: 'Java是世界上最好的语言', cover: '../assets/images/cover.jpg', introduce: 'Java作为一种广泛应用的编程语言，以其强大的跨平台能力和丰富的类库资源，赢得了众多开发者的喜爱。许多开发者坚信Java是世界上最好的语言，它不仅能够高效处理各种复杂任务，还拥有良好的安全性和稳定性，是构建大型企业级应用的首选。', source: '十寻官方' },
  { id: 2, title: 'Python是世界上最好的语言', cover: '../assets/images/cover.jpg', introduce: 'Python以其简洁明了的语法和强大的功能，被誉为世界上最好的编程语言之一。它不仅能够轻松处理数据分析、人工智能等前沿领域的问题，还拥有丰富的第三方库和社区支持。Python的易读性和易用性，使得开发者能够更快速地编写出高质量的代码。', source: '十寻官方' },
  { id: 3, title: 'js是世界上最好的语言', cover: '../assets/images/cover.jpg', introduce: 'JavaScript作为前端开发的核心语言，其灵活性和动态性使得它成为构建交互式网页应用的首选。从简单的表单验证到复杂的单页应用，JavaScript都能够游刃有余地处理。许多开发者认为JavaScript是世界上最好的语言，因为它不仅易于上手，还拥有强大的生态系统和广泛的社区支持。', source: '十寻官方' },
  { id: 4, title: 'js是世界上最好的语言', cover: '../assets/images/cover.jpg', introduce: 'JavaScript作为前端开发的核心语言，其灵活性和动态性使得它成为构建交互式网页应用的首选。从简单的表单验证到复杂的单页应用，JavaScript都能够游刃有余地处理。许多开发者认为JavaScript是世界上最好的语言，因为它不仅易于上手，还拥有强大的生态系统和广泛的社区支持。', source: '十寻官方' },
  { id: 5, title: 'js是世界上最好的语言', cover: '../assets/images/cover.jpg', introduce: 'JavaScript作为前端开发的核心语言，其灵活性和动态性使得它成为构建交互式网页应用的首选。从简单的表单验证到复杂的单页应用，JavaScript都能够游刃有余地处理。许多开发者认为JavaScript是世界上最好的语言，因为它不仅易于上手，还拥有强大的生态系统和广泛的社区支持。', source: '十寻官方' },
  { id: 6, title: 'js是世界上最好的语言', cover: '../assets/images/cover.jpg', introduce: 'JavaScript作为前端开发的核心语言，其灵活性和动态性使得它成为构建交互式网页应用的首选。从简单的表单验证到复杂的单页应用，JavaScript都能够游刃有余地处理。许多开发者认为JavaScript是世界上最好的语言，因为它不仅易于上手，还拥有强大的生态系统和广泛的社区支持。', source: '十寻官方' },
  { id: 7, title: 'js是世界上最好的语言', cover: '../assets/images/cover.jpg', introduce: 'JavaScript作为前端开发的核心语言，其灵活性和动态性使得它成为构建交互式网页应用的首选。从简单的表单验证到复杂的单页应用，JavaScript都能够游刃有余地处理。许多开发者认为JavaScript是世界上最好的语言，因为它不仅易于上手，还拥有强大的生态系统和广泛的社区支持。', source: '十寻官方' },
  { id: 8, title: 'js是世界上最好的语言', cover: '../assets/images/cover.jpg', introduce: 'JavaScript作为前端开发的核心语言，其灵活性和动态性使得它成为构建交互式网页应用的首选。从简单的表单验证到复杂的单页应用，JavaScript都能够游刃有余地处理。许多开发者认为JavaScript是世界上最好的语言，因为它不仅易于上手，还拥有强大的生态系统和广泛的社区支持。', source: '十寻官方' },
  { id: 9, title: 'js是世界上最好的语言', cover: '../assets/images/cover.jpg', introduce: 'JavaScript作为前端开发的核心语言，其灵活性和动态性使得它成为构建交互式网页应用的首选。从简单的表单验证到复杂的单页应用，JavaScript都能够游刃有余地处理。许多开发者认为JavaScript是世界上最好的语言，因为它不仅易于上手，还拥有强大的生态系统和广泛的社区支持。', source: '十寻官方' },
  // 更多数据...
]);

//对应历史记录
const history = ref<string[]>([]);

//对应搜索数据
const searchData = ref([
  '把大象放进冰箱需要几步？',
  'Java是世界上最好的语言',
  'Python是世界上最好的语言',
  'js是世界上最好的语言',
  // 更多数据...
]);

//### 方法定义 ###
//ai回复方法
const aiAnswer = (query:string) => {
  if (!eventSource) {
    //后续替换为基地址 + url
    eventSource = new EventSource('http://localhost/qianfan/v1/chat?content=' + query);

    eventSource.onmessage = (event) => {
      //切换逻辑拼接结果
      const data = JSON.parse(event.data);
      aiReply.value += data.result;
    };

    eventSource.onerror = (event) => {
      console.error("EventSource failed:", event);
      eventSource.close();
      eventSource = null;
    };
  }
}

//页面初始化方法
const pageInitialization = async () => {
  //初始化历史记录
  const result = await historyApi.obtainTheHistoricalRecordsTo5ThroughTheUserId();
  if(result.code === 200) {
    history.value = result.data.titles;
  }
  const name =  window.localStorage.getItem('ten-seek-nickname')
  if(name)  {
    nickname.value = name;
  }
  const head = window.localStorage.getItem('ten-seek-avatar')
  if(head) {
    avatar.value = head;
  }

  const query = route.query.query as string;
  if(query) {

    //判断是否开启了ai辅助搜索
    const setting= await settingApi.getSettingContentIsOpenByName({"name":"AI辅助搜索"});
    if(setting.code === 200 && setting.data) {
      AIAssisted.value = true;
      aiAnswer(query);
    }

    queryForm.key = query;
    const result = await searchEngineApi.ObtainTheSearchResultsByPagination(queryForm);
    console.log("看看初始化结果", result)
    if(result.code === 200) {
      searchRecord.value = result.data.searchResultVOList;
      total.value = parseInt(result.data.total);
    }else {
      searchRecord.value = [{id: 0, 
        title: '暂时未引入相关内容', 
        cover: 'https://img2024.cnblogs.com/blog/2644446/202406/2644446-20240629223724572-592870371.jpg', 
        introduce: '暂时未引入相关内容，敬请期待', 
        source: '十寻官方'}];
    }
  }
}

//调用初始化方法
pageInitialization();

//搜索选中事件
const handleSelect = (selectItem:any) => {
  console.log("让我看看你选了", selectItem) //小心这里拿到的是ref
  const selectedValue = selectItem.value.replace(/<[^>]+>/g, ''); //移除对应html标签
  searchQuery.value = selectedValue;
}

//搜索提示词
const querySearch = async (queryString:any, cb:any) => {
  let results = null;
  if(queryString === '') {
    results = history.value.map(item => ({ value: item }));  //表示搜索框中的数据为空时，搜索提示历史数据
  }else {
    const data = await searchEngineApi.searchPrompt({suffix:queryString});
    if(data.code === 200) {
      console.log(data.data.complementList)
      const autocompleteData = data.data.complementList.map(item => ({ value: item }));
      results = autocompleteData;
    }else {
      results = searchData.value.map(item => ({ value: item }));
    }
  }

  cb(results);     // 使用回调函数返回搜索结果
};

//个人中心点击方法
function clickPersonalCenterEvent() {
  let token = window.localStorage.getItem("ten-seek-jwt")
  if(token) {
    router.push({
      name: 'collect'
    });
  }else {
    loginDialogVisible.value = true;
  }
}

//搜索按钮点击方法
const clickSearchEvent = () => {
  if(!searchQuery.value) {
    ElMessage({
      message: '搜索内容请不要为空哦！',
      type: 'warning',
    })
    return;
  }
  //获取搜索字段
  router.push({ name: 'searchResult', query: { query: searchQuery.value }});
  pageInitialization();
  searchQuery.value = "";
}

//logo点击方法
function clickLogo() {
  router.push({
    name: 'home'
  })
}

//卡片点击方法，进入详情页面
const clickCard = async (article) => {
  if(article.source === "十寻官方") {
    router.push({ name: 'searchDetails', query:{articleId: article.id}});     //路由传参进入搜索详情页
  }else {
    //获取对应url并跳转
    const result =  await thirdPartyApi.getOne({id: article.id});
    if(result.code === 200) {
      console.log("看看获取到的第三方数据", result.data)
      window.open(result.data.url, '_blank')
    }else {
      ElMessage({
        message: '当前第三方网站在数据库中的收录已被取消',
        type: 'warning',
      })
    }
  }
}

// 监听当前页，和每页条数变化
const handleSizeChange = (pageSize:any) => {
  queryForm.pageCurrent = 1;
  queryForm.pageSize = pageSize;
  pageInitialization(); //重新初始化一下
};

const handleCurrentChange = (pageCurrent:any) => {
  queryForm.pageCurrent = pageCurrent;
  pageInitialization(); //重新初始化一下
};

//## 自定义事件方法
function closeDialog() {
	loginDialogVisible.value = false;
}

//### 生命周期函数 ###
onMounted(() => {
  let darkmode = window.localStorage.getItem('tenSeekIsDarkmode');
  if(darkmode === 'true') {
    isDarkmode.value = true;
  }
})
</script>

<style scoped lang="scss">
.container {
  height: 100%;
  // background: crimson;
  display: flex;
  flex-direction: column;
  background: var(--base-color);
  color: var(--text-color);

  .top {
    // background: cyan;
    width: 100%;
    flex: 1;
    margin-top: 5px;

    display: flex;
    justify-content: space-between; /* 使子项在主轴上两端分布 */
    align-items: center; /* 垂直居中 */

    .top-left {
      // background: beige;
      width: 60%;

      display: flex;
      .top-left-logo {
        margin-left: 25px;
        margin-right: 25px;
        display: flex;
        flex: 2;

        img {
          align-items: center; /* 垂直居中 */
          width: 100%;
        }
      }

      .top-left-search{
        margin: auto;
        height: 42px;
        flex: 8;

        text-align: center;
        display: flex;
        align-items: center;

        .top-left-search-input {
          flex: 0.92;
          height: 100%;

          /* 深度样式控制，通过f12工具找到对应的名字进行样式设置 */
          ::v-deep .el-input__wrapper {
            border-top-left-radius: 10px; 
            border-bottom-left-radius: 10px; 
            border-top-right-radius: 0px; 
            border-bottom-right-radius: 0px;
            height: 42px; /* 要和对应centre-search高度一致 */
            background: var(--base-color);
          }

          /* 输入框内文字的颜色 */
          ::v-deep .el-input__inner {
            color: var(--text-color);
          }
        }

        .top-left-search-icon {
          background: #409EFF;
          flex: 0.08;
          height: 100%;
          border-top-left-radius: 0px;
          border-bottom-left-radius: 0px;
          border-top-right-radius: 10px;
          border-bottom-right-radius: 10px;
        }
      }
    }

    .top-right {
      // background: blueviolet;
      .top-right-person {
        margin-right: 20px;
        display: flex;
        align-items: center;
        height: 100%;

        img {
          border-radius: 50%;
          width: 50px;       /* 固定宽度 */
          height: 50px;      /* 固定高度，与宽度相同 */
          object-fit: cover; /* 保证图片比例不变形 */
          margin-right: 10px;
          display: block;    /* 避免行内元素的间隙问题 */
        }

        .nickname {
        }
      }
    }
  }

  .centre {
    // background: blue;
    margin-top: 20px;
    width: 100%;
    flex: 8;
    background: var(--base-color);
    color: var(--text-color);

    display: flex;
    justify-content: center;

    .centre-left {
      // background: beige;
      width: 50%;
      margin-right: 10px;

      .centre-left-top {
        display: flex;
        flex-direction: column;

        .centre-left-top-card-0 { /* 第一行数据除去特殊的样式以外要和下面一致 */
          height: 350px;
          // background: green;
          margin-bottom: 60px;
        }

        .centre-left-top-card {
          height: 200px;
          // background: green;
          margin-bottom: 10px;

          display: flex;
          flex-direction: column;

          .centre-left-top-card-title {
            // background: white;
            flex: 1;
            font-size: 20px;
            text-decoration: underline;


            .title :deep(em) {
              color: red;
              font-style: normal;
            }
          }

          .centre-left-top-card-content {
            // background: yellow;
            flex: 8;

            display: flex;

            .centre-left-top-card-content-cover {
              // background: rgb(31, 37, 213);
              flex: 2.5;

              display: flex;
              align-items: center; /* 垂直居中 */

              img {
                width: 100%;
                border-radius: 10%;
              }
            }

            .centre-left-top-card-content-overview {
              // background: green;
              flex: 7.5;

              margin-left: 10px;

              display: flex;
              align-items: center; /* 垂直居中 */
            }
          }

          .centre-left-top-card-source {
            // background: red;
            flex: 1;
          }
        }

      }

      .centre-left-bottom {
        margin-top: 10px;
      }
    }

    .centre-right {
      // background: blueviolet;
      width: 30%;
      margin-left: 50px;

      .centre-right-top {
        font-size: 20px;
        font-weight: normal;
      }

      .centre-right-bottom {
        ol{
          li {
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>